import { Swiper, SwiperItem, View, Image, ScrollView } from '@tarojs/components'
import { memo, useState } from 'react'
import './index.scss'

interface SwiperCardProps {
  curIdx: number
  setCurIdx: (e: number) => void
}

interface SwiperItemTypes {
  list: any[]
  page: number
  pageSize: number
}

const SwiperCard = memo(({ curIdx, setCurIdx }: SwiperCardProps) => {
  const [swiperList, updateSwiperList] = useState<SwiperItemTypes[]>([
    {
      list: Array.from({ length: 20 }, () => ({})),
      page: 1,
      pageSize: 10,
    },
    {
      list: Array.from({ length: 31 }, () => ({})),
      page: 1,
      pageSize: 10,
    },
    {
      list: Array.from({ length: 18 }, () => ({})),
      page: 1,
      pageSize: 10,
    },
    {
      list: Array.from({ length: 26 }, () => ({})),
      page: 1,
      pageSize: 10,
    },
  ])

  const handleChange = e => {
    setCurIdx(e.detail.current)
  }
  return (
    <>
      <View className="swiper_box">
        <Swiper className="swiper" duration={300} current={curIdx} onChange={handleChange}>
          {swiperList.map((item, index) => {
            return (
              <SwiperItem key={index}>
                <ScrollView
                  scrollY
                  style={{
                    height: '100%',
                  }}
                >
                  <View className="content">
                    {item.list.map((sitem, sid) => {
                      return (
                        <View className="item" key={sid}>
                          <Image src="https://pic.imgdb.cn/item/63fca023f144a01007242e89.jpg" />
                          <View className="dz">
                            <View className="at-icon at-icon-heart icon" />
                            2635
                          </View>
                        </View>
                      )
                    })}
                  </View>
                </ScrollView>
              </SwiperItem>
            )
          })}
        </Swiper>
      </View>
    </>
  )
})

export default SwiperCard
